<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	template="/xhtml/bases/accountbase.xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:t="http://myfaces.apache.org/tomahawk"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:bargas="http://barganhas.com.br/barganhas">
	
	<ui:define name="accountHeader">
		<h:outputText value="#{msg.myRegister} #{msg.privateAreaFormSeparatorHeader} #{msg.privateAreaActionEdit}"/>
	</ui:define>
	
	<ui:define name="userAccountContent">
		<h:panelGroup styleClass="boxUserAccountForm boxUserAccountFormInputs" layout="block">
			<h:panelGrid styleClass="tableInputFormUserAccount" columns="2" columnClasses="columnLabel, columnInput">
			
				<h:outputLabel value="#{msg.userAccountProfileImage}:" for="profileImage"/>
				<rich:fileUpload id="profileImage" fileUploadListener="#{userAccountBean.uploadFile}"
								acceptedTypes="png, jpg, jpeg"
								noDuplicate="true"
								addLabel="#{msg.fileUploadAddLabel}"
								clearAllLabel="#{msg.fileUploadClearLabel}"
								clearLabel="#{msg.fileUploadDeleteLabel}"
								deleteLabel="#{msg.fileUploadDeleteLabel}"
								uploadLabel="#{msg.fileUploadUploadLabel}"
								sizeExceededLabel="#{msg.fileUploadSizeExceededLabel}"
								doneLabel="#{msg.fileUploadDoneLabel}"
								listHeight="60px"
								maxFilesQuantity="1">
				</rich:fileUpload>
				
				<!-- fullname -->
				<h:outputLabel value="#{msg.privateAreaLoginName}:" for="userName"/>
				<h:inputText id="userName" value="#{userAccountBean.userAccount.fullname}" maxlength="50" styleClass="inputMainForm bigInputMainForm"/>
				
				<!-- state -->
				<h:outputLabel value="#{msg.stateTitle}:" for="userAccountState"/>
				<h:selectOneMenu id="userAccountState" value="#{userAccountBean.selectedState}"
					 styleClass="inputMainForm mediumInputuMainFormSelectMenu" converter="omnifaces.SelectItemsConverter">
					
					<f:selectItem itemLabel="#{msg.msgSelect}" itemValue=" " noSelectionOption="true"/>
					<f:selectItems value="#{userAccountBean.listStates}" />
					
					<a4j:ajax event="change" listener="#{userAccountBean.prepareListCities}"
						execute="@this" render="userAccountCity" onbeforesubmit="popupLoading(true);" oncomplete="popupLoading(false);"/>
				</h:selectOneMenu>
				
				<!-- city -->
				<h:outputLabel value="#{msg.cityTitle}:" for="userAccountCity"/>
				<h:selectOneMenu id="userAccountCity" value="#{userAccountBean.selectedCity}"
					 styleClass="inputMainForm mediumInputuMainFormSelectMenu" converter="omnifaces.SelectItemsConverter">
					
					<f:selectItem itemLabel="#{msg.msgSelect}" itemValue=" " noSelectionOption="true"/>
					<f:selectItems value="#{userAccountBean.listCities}" />
				</h:selectOneMenu>
				
				<!-- nickname -->
				<h:outputLabel value="#{msg.privateAreaLoginUser}:" for="userNickname"/>
				<bargas:outputText id="userNickname" value="#{userAccountBean.userAccount.nickname}"
							styleClass="inputMainForm bigInputMainForm inputDisable"/>
				
				<!-- email -->
				<h:outputLabel value="#{msg.privateAreaLoginEmail}:" for="userEmail"/>
				<h:inputText id="userEmail" value="#{userAccountBean.userAccount.email}" maxlength="50" styleClass="inputMainForm bigInputMainForm"/>
				
				<!-- password -->
				<h:outputLabel value="#{msg.privateAreaLoginPassword}:" for="userPassword"/>
				<h:inputSecret id="userPassword" value="#{userAccountBean.userAccount.password}" maxlength="50" styleClass="inputMainForm mediumInputMainForm"/>
				
				<!-- confirm password -->
				<h:outputLabel value="#{msg.privateAreaLoginConfirmPassword}:" for="userConfirmPassword"/>
				<h:inputSecret id="userConfirmPassword" value="#{userAccountBean.userAccount.password}" maxlength="50" styleClass="inputMainForm mediumInputMainForm"/>
				
				<!-- contact phone number 1 -->
				<h:outputLabel value="#{msg.userAccountContactPhoneNumberOne}:" for="userContactPhoneNumberOne"/>
				<h:inputText id="userContactPhoneNumberOne" value="#{userAccountBean.userAccount.contactPhoneNumberOne}"
							maxlength="50"
							styleClass="inputMainForm mediumInputMainForm"/>

				<!-- contact phone number 2 -->
				<h:outputLabel value="#{msg.userAccountContactPhoneNumberTwo}:" for="userContactPhoneNumberTwo"/>
				<h:inputText id="userContactPhoneNumberTwo" value="#{userAccountBean.userAccount.contactPhoneNumberTwo}"
							maxlength="50"
							styleClass="inputMainForm mediumInputMainForm"/>

				<!-- contact email -->
				<h:outputLabel value="#{msg.userAccountContactMail}:" for="userContactEmai"/>
				<h:inputText id="userContactEmai" value="#{userAccountBean.userAccount.contactEmail}"
							maxlength="50"
							styleClass="inputMainForm mediumInputMainForm"/>
				
			</h:panelGrid>
		</h:panelGroup>
		
		<t:saveState value="#{userAccountBean.profileImage}" />
		<t:saveState value="#{userAccountBean.listStates}"/>
		<t:saveState value="#{userAccountBean.selectedState}"/>
		<t:saveState value="#{userAccountBean.listCities}"/>
		<t:saveState value="#{userAccountBean.selectedCity}"/>
	</ui:define>
	
	<ui:define name="accountBottomButtons">
		<h:commandButton value="#{msg.privateAreaActionSave}" styleClass="customButton2 buttonMainForm" action="#{userAccountBean.save}" immediate="false" />
		<h:commandButton value="#{msg.privateAreaActionCancel}" styleClass="customButton2 buttonMainForm" action="#{userAccountBean.consult}" immediate="false"/>
	</ui:define>
	
</ui:composition>
